<template>
    <div class="city-hot">
        <div class="hot-title">
            热门城市
        </div>
        <ul class="hot-list clearfix">
            <li class="hot-item" v-for="(item,index) in hotCities" @click="changeCityName(item)" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name : "city-hot",
    data(){
        return {

        }
    },
    methods : {
        changeCityName : function(cityName){
            this.$store.commit("setCityHandle",cityName)
            this.$router.push("/")
        }
    },
    props : [
        "hotCities"
    ]
}
</script>

<style scoped>

.hot-title{ font-size:0.26rem; color:#212121; padding:.2rem; background:#f5f5f5; }

.hot-list{  }

.hot-item{ width:33.3333%; height:0.8rem; line-height:0.8rem; text-align:center; border-bottom:0.02rem solid #ccc; border-right:0.02rem solid #ccc; box-sizing:border-box; float: left; box-shadow:0 0 0.1rem #f0eeee;}

.hot-item:nth-of-type(3n){ border-right:none;}

</style>


